<div class="demo-wrapper">
  <div>
    <mat-form-field class="demo-form-field">
      <mat-label>Message</mat-label>
      <input matInput [formControl]="message">
    </mat-form-field>

    <mat-form-field class="demo-form-field">
      <mat-label>Show delay</mat-label>
      <input matInput type="number" [formControl]="showDelay">
      <mat-hint>milliseconds</mat-hint>
    </mat-form-field>

    <mat-form-field class="demo-form-field">
      <mat-label>Hide delay</mat-label>
      <input matInput type="number" [formControl]="hideDelay">
      <mat-hint>milliseconds</mat-hint>
    </mat-form-field>

    <mat-form-field class="demo-form-field">
      <mat-label>Tooltip position</mat-label>
      <mat-select [formControl]="position">
        <mat-option *ngFor="let positionOption of positionOptions" [value]="positionOption">
          {{positionOption}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>

  <button
    mat-raised-button
    [matTooltip]="message.value"
    [matTooltipShowDelay]="showDelay.value"
    [matTooltipHideDelay]="hideDelay.value"
    [matTooltipPosition]="position.value">Action</button>
</div>
